$(function () {
    let form = layui.form
    //定义一个对象里面放入用于发送Ajax
    let q = {
        pagenum:'1' ,//是 int 页码值
        pagesize: '2',//是 int 每页显示多少条数据
        cate_id:'' ,//否 string 文章分类的 Id
        state: '',//否 string 文章的状态， 可选值有： 已发布、 草稿
    }


    //定义一个写入数据的ajax
    initArticleList()
    function initArticleList() {
        axios({
            url:'/my/article/list',
            method:'get',
            
            params: q
        }).then(res=>{
            //成功回调
           
            //渲染数据
            let htmlArr = []
            res.data.data.forEach(value => {
                htmlArr.push(`<tr>
                <td>${value.Id}</td>
                <td>${value.cate_name}</td>
                <td>${value.pub_date}</td>
                <td>${value.state}</td>
                <td>
                    <button type="button" class="layui-btn layui-btn-xs">修改</button>
                        <button type="button" class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
                </td>
              </tr>`)

            })
            //empty删除之前的内容在用join方法字符串拼接
            $('tbody').empty().html(htmlArr.join(''))
            renderPage(res.data.total)
        })
    }


    //初始化文章类别
    initArtCateList()
    function initArtCateList(){
        axios({
            url:'/my/article/cates',
            method:'get',
        }).then(res=>{
            //成功回调
            
            let htmlArr = ['<option value="" >请选择文章类别</option>']
            res.data.data.forEach(value => {
                htmlArr.push(`<option value="${value.Id}" >${value.name}</option>`)
            })
            $('[name="cate_id"]').empty().html(htmlArr.join(''))
            //渲染全部动态新增的form表单
            form.render()
        })
    }

    //form表单的发布事件
    $('#form').on('submit',function(e){
        e.preventDefault()
        //获取用户选择的内容然后在渲染数据
        q.cate_id = $('[name="cate_id"]').val()
        q.state = $('[name="state"]').val()
        initArticleList()
    })


    //在渲染数据后同时渲染页码
    function renderPage(total) {
        var laypage = layui.laypage;
  
        //执行一个laypage实例
        laypage.render({
          elem: 'test1', //注意，这里的 test1 是 ID，不用加 # 号
          count: total,//数据总数，从服务端得到
          limit:q.pagesize,
          curr:q.pagenum,
          jump: function(obj, first){
            //obj包含了当前分页的所有参数，比如：
            console.log(obj)
            //首次不执行
            if(!first){
              //do something
                q.pagenum =  obj.curr
                initArticleList()
            }
          }
        })
    }
})